<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title th:text="${title} + '!'"></title>
    <!-- zui -->
    <link href="https://www.ynjsedu.cn/static/css/zui.min.css" rel="stylesheet">
    <!-- Bootstrap Material Design -->
    <link href="https://www.ynjsedu.cn/static/css/ripples.min.css" rel="stylesheet">
    <!-- my css -->
    <link href="/css/style-mobile.css" rel="stylesheet">
    <script src="https://www.ynjsedu.cn/static/js/jquery.min.js"></script>
    <script src="https://www.ynjsedu.cn/static/js/jquery.util.Ajax.httpRequest.js"></script>
    <!-- iconfont    -->
    <link href="http://at.alicdn.com/t/font_885931_wyz7jw3x2d.css" rel="stylesheet">
    <script src="http://at.alicdn.com/t/font_885931_8mwo8dkn2y9.js"></script>
    <link rel="icon" type="image/png" href="https://tgzfile.oss-cn-beijing.aliyuncs.com/files//2022/12/23/16717798798412521.png">
</head>

<body class="zhibo-page mform-page">
    <div class="zhibo-ft-nav ft-mbform" style="padding-top: 0;">
        <div class="row">
            <div class="col-xs-24">
                <!-- 此处登录状态显示报名记录，非登录状态显示手机登录 -->
                <a href="#" class="btn btn-lg btn-warning" type="button" id="pay-bt" style="width: 100%;height:60px;line-height: 60px;font-size: 20px;padding: 0 0;">立刻签到</a>
            </div>
        </div>
    </div>
    <div class="zhibo-head-nav">
        <div class="text">云南特盖则科技有限公司2022年会在线签到系统</div>
    </div>
    <div class="container-fluid bg-panel" style="margin:0 0 0 0;">
            <div class="bg-img"><img src="https://tgzfile.oss-cn-beijing.aliyuncs.com/files//2022/12/23/16717796158395408.jpg" alt="" style="display: block;width:100%;"></div>


    </div>
    <div class="container bg-panel">
        <div class="panel-heading">
            <div class="title">在线签到</div>
        </div>
        <div class="panel-body mobile-form">
            <form method="post" id="defaultForm">
                <div class="form-group">
                    <label for="phone" class="required">请输入您的手机号</label>
                    <input id="phone" type="text" class="form-control" placeholder="请输入手机号签到" name="username" style="height:60px;line-height:60px;font-size:20px;margin-top:10px">
                </div>
            </form>
        </div>

    </div>
    </div>
</body>

<!-- 表单验证 -->
<link rel="stylesheet" href="https://www.ynjsedu.cn/static/css/bootstrapValidator.css">
<script src="https://www.ynjsedu.cn/static/js/bootstrapValidator.min.js"></script>
<script>
    $(function () {
        /* 文档加载，执行一个函数*/
        $('#defaultForm')
            .bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    /*input状态样式图片*/
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    /*验证：规则*/
                    username: { //验证input项：验证规则
                        message: 'The username is not valid',

                        validators: {
                            notEmpty: { //非空验证：提示消息
                                message: '手机号不能为空'
                            },
                            regexp: {
                                regexp:/(^\d{11}$)/,
                                message: '手机号不正确（11位手机号）'
                            },
                        }
                    },
                }
            })

        $('#pay-bt').click(function () {
            $('#defaultForm').data('bootstrapValidator').validate();
            if (!$('#defaultForm').data('bootstrapValidator').isValid()) {
                //没有通过校验
            } else {
                // 通过，跳转
                // location.href = "mobile-success.html"
                $.httpRequestAsyncPost("/addPhoneUnique",
                    {phone:$("#phone").val()},
                    function(result){
                        if(result && result.data && result.data > 0){
                            location.href = "mobile-success.html"
                        }
                        else{
                            location.href = "mobile-fail.html"
                        }
                    },
                    function(result){
                        location.href = "mobile-fail.html"
                        console.log(result);
                    });
            }
        });

    });
</script>



<!-- ZUI Javascript组件 -->
<!--<script src="/js/zui.min.js"></script>-->
<!-- Bootstrap Material Design -->
<!--<script src="/js/ripples.min.js"></script>-->
<!--<script src="/js/material.js"></script>-->

</html>